﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>点击图片弹窗-jq22.com</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <link rel="stylesheet" href="plugins/Gallery/css/style.css" media="all" />
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<style>
/* Style the Image Used to Trigger the Modal */	
#myImg {
	border-radius:5px;
	cursor:pointer;
	transition:0.3s;
}
#myImg:hover {
	opacity:0.7;
}
/* The Modal (background) */
		
.modal {
	display:none;
	/* Hidden by default */
position:fixed;
	/* Stay in place */
 z-index:99999;
	/* Sit on top */
padding-top:100px;
	/* Location of the box */
left:0;
	top:0;
	width:100%;
	/* Full width */
height:100%;
	/* Full height */
overflow:auto;
	/* Enable scroll if needed */
background-color:rgb(0,0,0);
	/* Fallback color */
background-color:rgba(0,0,0,0.9);
	/* Black w/ opacity */
}
/* Modal Content (Image) */
		
.modal-content {
	margin:auto;
	display:block;
	width:80%;
	max-width:700px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
		
#caption {
	margin:auto;
	display:block;
	width:80%;
	max-width:700px;
	text-align:center;
	color:#ccc;
	padding:10px 0;
	height:150px;
}
/* Add Animation - Zoom in the Modal */
		
.modal-content,#caption {
	-webkit-animation-name:zoom;
	-webkit-animation-duration:0.6s;
	animation-name:zoom;
	animation-duration:0.6s;
}
@-webkit-keyframes zoom {
	from {
	-webkit-transform:scale(0)
}
to {
	-webkit-transform:scale(1)
}
}@keyframes zoom {
	from {
	transform:scale(0)
}
to {
	transform:scale(1)
}
}/* The Close Button */
.close {
	position:absolute;
	top:15px;
	right:35px;
	color:#f1f1f1;
	font-size:40px;
	font-weight:bold;
	transition:0.3s;
}
.close:hover,.close:focus {
	color:#bbb;
	text-decoration:none;
	cursor:pointer;
}
/* 100% Image Width on Smaller Screens */
		
@media only screen and (max-width:700px) {
	.modal-content {
	width:100%;
}
}</style>
</head>
<body>
    <div id="effect-6" class="effects clearfix">
        <div class="img">
            <img src="plugins/Gallery/img/jpg/1.jpg" alt="">
            <div class="overlay">
                <a class="close-overlay layui-icon">&#xe626;</a>
                <div><a href="#"><img src="plugins/Gallery/img/delete.png" /></a></div>
                <div><a href="#"><img src="plugins/Gallery/img/edit.png" /></a></div>
                <div><a href="#"><img src="plugins/Gallery/img/link.png" /></a></div>
            </div>
        </div>
        <div class="img">
            <img src="plugins/Gallery/img/jpg/1.jpg" alt="">
            <div class="overlay">
                <a class="close-overlay layui-icon">&#xe626;</a>
                <div><a href="#"><img src="plugins/Gallery/img/delete.png" /></a></div>
                <div><a href="#"><img src="plugins/Gallery/img/edit.png" /></a></div>
                <div><a href="#"><img src="plugins/Gallery/img/link.png" /></a></div>
            </div>
        </div>
        <div class="img">
            <img src="plugins/Gallery/img/jpg/1.jpg" alt="">
            <div class="overlay">
                <a class="close-overlay layui-icon">&#xe626;</a>
                <div><a href="#"><img src="plugins/Gallery/img/delete.png" /></a></div>
                <div><a href="#"><img src="plugins/Gallery/img/edit.png" /></a></div>
                <div><a href="#"><img src="plugins/Gallery/img/link.png" /></a></div>
            </div>
        </div>
        <div class="img">
            <img src="plugins/Gallery/img/jpg/1.jpg" alt="">
            <div class="overlay">
                <a class="close-overlay layui-icon">&#xe626;</a>
                <div><a href="#"><img src="plugins/Gallery/img/delete.png" /></a></div>
                <div><a href="#"><img src="plugins/Gallery/img/edit.png" /></a></div>
                <div><a href="#"><img src="plugins/Gallery/img/link.png" /></a></div>
            </div>
        </div>
        <div class="img">
            <img src="plugins/Gallery/img/jpg/1.jpg" alt="">
            <div class="overlay">
                <a class="close-overlay layui-icon">&#xe626;</a>
                <div><a href="#"><img src="plugins/Gallery/img/delete.png" /></a></div>
                <div><a href="#"><img src="plugins/Gallery/img/edit.png" /></a></div>
                <div><a href="#"><img src="plugins/Gallery/img/link.png" /></a></div>
            </div>
        </div>
        <div class="img">
            <img src="plugins/Gallery/img/jpg/1.jpg" alt="">
            <div class="overlay">
                <a class="close-overlay layui-icon">&#xe626;</a>
                <div><a href="#"><img src="plugins/Gallery/img/delete.png" /></a></div>
                <div><a href="#"><img src="plugins/Gallery/img/edit.png" /></a></div>
                <div><a href="#"><img src="plugins/Gallery/img/link.png" /></a></div>
            </div>
        </div>
    </div>


<!-- Trigger the Modal -->
<img id="myImg" src="http://www.jq22.com/img/cs/500x300b.png" alt="Trolltunga, Norway" width="300" height="200">

<!-- The Modal -->
<div id="myModal" class="modal">

    <!-- The Close Button -->
    <span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span>

    <!-- Modal Content (The Image) -->
    <img class="modal-content" id="img01">

    <!-- Modal Caption (Image Text) -->
    <div id="caption"></div>
</div>
    <script type="text/javascript" src="plugins/Gallery/js/modernizr.js"></script>
    <script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function() {
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}
$(document).ready(function () {

if (Modernizr.touch) {
	        
    // show the close overlay button
    //$(".close-overlay").removeClass("hidden");
    // handle the adding of hover class when clicked
    $(".img").click(function(e){
        if (!$(this).hasClass("hover")) {
            $(this).addClass("hover");
        }
    });
    // handle the closing of the overlay
    $(".close-overlay").click(function (e) {;
        e.preventDefault();
        e.stopPropagation();
        if ($(this).closest(".img").hasClass("hover")) {
            $(this).closest(".img").removeClass("hover");
        }
    });
} else { 
    // handle the mouseenter functionality
    $(".img").mouseenter(function(){
        $(this).addClass("hover");
    })
    // handle the mouseleave functionality
    .mouseleave(function(){
        $(this).removeClass("hover");
    });
    $(".close-overlay").click(function (e) {
        e.preventDefault();
        e.stopPropagation();
        if ($(this).closest(".img").hasClass("hover")) {
            $(this).closest(".img").removeClass("hover");
        }
    });
    $(".img").click(function (e) {
        modal.style.display = "block";
        modalImg.src = $(this).find("img").attr('src');
        captionText.innerHTML = this.alt;
        if (!$(this).hasClass("hover")) {
            $(this).addClass("hover");
        }
    });
}
});
    </script>
</body>
</html>
